<template>
    <scroll-view class="wuc-tab"
        :class="tabClass"
        :style="tabStyle"
        scroll-with-animation
        scroll-x
        :scroll-left="scrollLeft"
    >
        <div v-if="!textFlex">
            <div class="wuc-tab-item"
                :class="[index === tabCur ? selectClass + ' cur':'']"
                v-for="(item,index) in tabList"
                :key="index"
                :id="index"
                @tap="tabSelect(index,$event)"
            >
                <text :class="item.icon"></text>
                <span>{{item.name}}</span>
            </div>
        </div>

        <div class="flex text-center"
            v-if="textFlex"
        >
            <div class="wuc-tab-item flex-sub"
                :class="index === tabCur ? selectClass + ' cur':''"
                v-for="(item,index) in tabList"
                :key="index"
                :id="index"
                @tap="tabSelect(index,$event)"
            >
                <text :class="item.icon"></text>
                <span>{{item.name}}</span>
            </div>
        </div>
    </scroll-view>
</template>
<script>
export default {
    name: 'wuc-tab',
    data() {
        return {};
    },
    props: {
        tabList: {
            type: Array,
            default() {
                return [];
            }
        },
        tabCur: {
            type: Number,
            default() {
                return 0;
            }
        },
        tabClass: {
            type: String,
            default() {
                return '';
            }
        },
        tabStyle: {
            type: String,
            default() {
                return '';
            }
        },
        textFlex: {
            type: Boolean,
            default() {
                return false;
            }
        },
        selectClass: {
            type: String,
            default() {
                return 'text-blue';
            }
        }
    },
    methods: {
        tabSelect(index, e) {
            if (this.currentTab === index) return false;
            this.$emit('update:tabCur', index);
            this.$emit('change', index);
        }
    },
    computed: {
        scrollLeft() {
            return (this.tabCur - 1) * 60;
        }
    }
};
</script>
<style>
div,
scroll-view,
swiper {
    box-sizing: border-box;
}

/deep/ .uni-scroll-view ::-webkit-scrollbar {
    /* 隐藏滚动条，但依旧具备可以滚动的功能 */
    display: none;
    width: 0;
    height: 0;
    color: transparent;
    background: transparent;
}
.wuc-tab {
    white-space: nowrap;
    touch-action: none;
}
.wuc-tab-item {
    height: 80upx;
    display: inline-block;
    line-height: 80upx;
    margin: 0 10upx;
    padding: 0 20upx;
    font-size: 26rpx;
}

.wuc-tab-item.cur {
    border-bottom: 4upx solid;
}

.wuc-tab.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1024;
    box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
}

.flex {
    display: flex;
}
.text-center {
    text-align: center;
}
.flex-sub {
    flex: 1;
}
.text-blue {
    color: #0081ff;
}
.text-white {
    color: #ffffff;
}
.bg-white {
    background-color: #ffffff;
}
.bg-blue {
    background-color: #0081ff;
}
.text-orange {
    color: #f37b1d;
}

.text-xl {
    font-size: 36upx;
}
</style>
